<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/static/layui/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="<%=request.getContextPath()%>/static/css/public.css" media="all" />
</head>
<body class="childrenBody">
<form class="layui-form">
    <blockquote class="layui-elem-quote quoteBox">
        <form class="layui-form">
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="telephoneSearch" placeholder="请输入手机号" />
                </div>
                <div class="layui-input-inline">
                    <select id="deptSearch">
                        <option value=""></option>
                    </select>
                </div>
                <a class="layui-btn search_btn" data-type="reload">搜索</a>
            </div>
            <shiro:hasPermission name="user:add">
                <div class="layui-inline">
                    <a class="layui-btn layui-btn-normal addUser_btn">添加用户</a>
                </div>
            </shiro:hasPermission>

            <div class="layui-inline">
                <a class="layui-btn layui-btn-danger layui-btn-normal delAll_btn">批量删除</a>
            </div>
        </form>
    </blockquote>
    <table id="userList" lay-filter="userList"></table>
    <!--操作-->
    <script type="text/html" id="userListBar">
        <shiro:hasPermission name="user:edit">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        </shiro:hasPermission>
       <shiro:hasPermission name="user:delete">
           <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
       </shiro:hasPermission>
      <shiro:hasPermission name="user:look">
          <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="look">预览</a>
      </shiro:hasPermission>
      <shiro:hasPermission name="user:grant">
          <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="assignRole">分配角色</a>
      </shiro:hasPermission>
    </script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/static/layui/layui/layui.js"></script>
    <script>
        layui.use(['form','layer','laydate','table','laytpl'],function(){
            var form = layui.form,
                layer = parent.layer === undefined ? layui.layer : top.layer,
                $ = layui.jquery,
                laydate = layui.laydate,
                laytpl = layui.laytpl,
                table = layui.table;
            //用户列表
            var tableIns = table.render({
                elem: '#userList',
                url : '/users',
                cellMinWidth : 95,
                page : true,
                height : "full-125",
                limit : 5,
                limits : [5,15,20,25],
                id : "userListTable",
                cols : [[
                    {type: "checkbox", fixed:"left", minWidth:50},
                    {field: 'telephone', title: '手机号', minWidth:125, align:"center"},
                    {field: 'realname', title: '姓名', minWidth:100, align:"center"},
                    {field: 'birthday', title: '生日', minWidth:100, align:"center",templet:function (d) {
                        return d.birthday.substring(0,10);
                    }},
                    {field: 'available', title: '状态', minWidth:100, align:"center",templet:function (d) {
                        return d.available==1?"启用":"禁用";
                    }},
                    {field: 'dept', title: '所属部门', minWidth:100, align:"center",templet:function (d) {
                        return d.dept.dname;
                    }},
                    {title: '操作', minWidth:300, templet:'#userListBar',fixed:"right",align:"center"}
                ]]
            });
            //查询所有的部门
            $.ajax({
                url:'/selectAllDepts',
                type:'GET',
                success:function (res) {
                    for(var i=0;i<res.length;i++){
                        var optionitem=$("<option></option>");
                        optionitem.attr("value",res[i].id);
                        optionitem.append(res[i].dname);
                        $("#deptSearch").append(optionitem);
                    }
                    form.render('select'); //刷新select选择框渲染
                }
            });
            //搜索信息
            $(".search_btn").click(function () {
                //获取电话号码
                var telephone=$("#telephoneSearch").val();
                //获取部门的id
                var deptId=$("#deptSearch").val();
                //重载表格
                tableIns.reload({
                    where:{
                        telephone:telephone,
                        did:deptId
                    }
                });
            });
            //点击增加用户的按钮触发事件
            $(".addUser_btn").click(function () {
               var userLayer=layui.layer.open({
                   type:2,
                   title:'添加用户',
                   content:'/prepAddUser',
                   area: ['500px', '300px'],
                   success: function(layero, index){
                       setTimeout(function(){
                           layui.layer.tips('点击此处返回用户列表', '.layui-layer-setwin .layui-layer-close', {
                               tips: 3
                           });
                       },500)
                   }
               });
                layui.layer.full(userLayer);//全屏打开
            });

            //选择表格中的操作按钮
            table.on("tool(userList)",function (obj) {
               switch (obj.event){
                   case 'del':
                       delUser(obj.data.id);
                       break;
                   case 'edit':
                       editUser(obj.data);
                       break;
                   case 'assignRole':
                       assignRole(obj.data.id);
                       break;
               }
            });
            //删除的函数
            function delUser(id) {
                $.ajax({
                    url:'/users/'+id,
                    type:"DELETE",
                    dataType:"JSON",
                    success:function (res) {
                       if(res.code==1003){
                           //提示
                           layui.layer.msg(res.msg);
                           //刷新表格
                           tableIns.reload();
                       }
                    },

                });
            }
            //批量删除
            $(".delAll_btn").click(function () {
                var checkStatus=table.checkStatus('userListTable');
                var data=checkStatus.data;
                var idArray="";
                if(data.length>0){
                    for(var i=0;i<data.length;i++){
                        idArray+=data[i].id+",";
                    }
                    idArray=idArray.substring(0,idArray.length-1);
                    console.log(idArray);
                    $.ajax({
                        url:'/users/deleteBatch',
                        type:'GET',
                        data:{ids:idArray},
                        dataType:"JSON",
                        success:function (res) {
                            if(res.code==1003){
                                //提示
                                layui.layer.msg(res.msg);
                                //刷新表格
                                tableIns.reload();
                            }
                       }
                    });
                    console.log(idArray);
                }else{
                    layui.layer.msg("你至少要选择一行");
                }
            });
            //进入编辑界面
            function editUser(data) {
                var userLayer=layui.layer.open({
                    type:2,
                    title:'编辑用户',
                    content:'/prepEditUser',
                    area: ['500px', '300px'],
                    success: function(layero, index){
                        var body = layui.layer.getChildFrame('body', index);//少了这个是不能从父页面向子页面传值的
                        body.contents().find("#telephone").val(data.telephone);
                        body.contents().find("#password").val(data.password);
                        body.contents().find("#realname").val(data.realname);
                        body.contents().find("#birthday").val(data.birthday);
                        var optionAvaibleItem1=$("<option value='1'>启用</option>");
                        var optionAvaibleItem2=$("<option value='0'>禁用</option>");
                        if(data.available==1){
                            optionAvaibleItem1.attr("selected","selected");
                        }
                        if(data.available==0){
                            optionAvaibleItem2.attr("selected","selected");
                        }
                        body.contents().find("#available").append(optionAvaibleItem1);
                        body.contents().find("#available").append(optionAvaibleItem2);
                        //console.log()
                        //获取图片的路径
                        body.contents().find("#userImage").attr("src","/static/images/"+data.headimg);
                        $.ajax({
                            url:'/selectAllDepts',
                            type:'GET',
                            success:function (res) {
                                for(var i=0;i<res.length;i++){
                                    var optionItem=$("<option></option>");
                                    optionItem.attr("value",res[i].id);
                                    if(data.dept.id==res[i].id){
                                        optionItem.attr("selected","selected");
                                    }
                                    optionItem.append(res[i].dname);
                                    body.contents().find("#deptid").append(optionItem);
                                }
                            }
                        });
                    }
                });
                layui.layer.full(userLayer);//全屏打开
            }
            //打开分配角色的页面
            function assignRole(uid){
                var userLayer=layui.layer.open({
                    type:2,
                    title:'分配角色',
                    content:'/prepAssignRole',
                    area: ['500px', '300px'],
                    success: function(layero, index){
                        //查询uid
                        console.log(uid+"*******")
                        var body = layui.layer.getChildFrame('body', index);//少了这个是不能从父页面向子页面传值的
                        body.contents().find("#uid").val(uid);

                    }
                });

            }
        })
    </script>
</body>
</html>